<template>
  <view class="container">
    <view class="barrage" v-for="(item, index) in barrageList" :key="index">{{ item }}</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      barrageList: ['弹幕1', '弹幕2', '弹幕3', '弹幕4', '弹幕5', '弹幕6', '弹幕7', '弹幕8', '弹幕9', '弹幕10']
    };
  },
  mounted() {
    this.showBarrage();
  },
  methods: {
    showBarrage() {
      const container = this.$refs.container;
      const barrageList = this.barrageList;
      let currentIndex = 0;

      function showNextBarrage() {
        if (currentIndex >= barrageList.length) {
          return;
        }
        const barrage = document.createElement('view');
        barrage.classList.add('barrage');
        barrage.innerText = barrageList[currentIndex];
        container.appendChild(barrage);

        setTimeout(() => {
          barrage.remove();
          currentIndex++;
          showNextBarrage();
        }, 1000);
      }

      showNextBarrage();
    }
  }
};
</script>

<style>
.container {
  position: relative;
  height: 100px;
}
.barrage {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
</style>